
<template>
  <div class="h-full flex flex-col bg-gray-100">
    <!-- 导航栏 -->
    <div class="nav-bar h-12 flex items-center px-4">
      <button @click="goBack" class="text-white">
        <i class="fas fa-chevron-left text-lg"></i>
      </button>
      <h2 class="text-lg font-semibold ml-4">详细资料</h2>
    </div>

    <!-- 个人信息 -->
    <div class="flex-1 overflow-y-auto">
      <div class="bg-white">
        <div class="flex items-center p-4">
          <img 
            :src="contact.avatar" 
            :alt="contact.nickname"
            class="w-20 h-20 rounded"
          >
          <div class="ml-4">
            <h3 class="text-xl font-semibold">{{ contact.nickname }}</h3>
            <p class="text-gray-600">微信号: {{ contact.username }}</p>
            <p v-if="contact.region" class="text-sm text-gray-500 mt-1">地区: {{ contact.region }}</p>
          </div>
        </div>
      </div>

      <div class="bg-white mt-2">
        <div class="px-4 py-3 border-b border-gray-100">
          <h4 class="font-medium">更多信息</h4>
        </div>
        <div class="px-4 py-3 border-b border-gray-100">
          <p class="text-sm text-gray-600">个性签名</p>
          <p class="text-gray-900 mt-1">{{ contact.signature || '这个人很懒，什么都没有留下' }}</p>
        </div>
      </div>

      <div class="bg-white mt-2">
        <div class="px-4 py-3 border-b border-gray-100 flex justify-between items-center">
          <span>设为星标朋友</span>
          <button 
            @click="toggleStar"
            class="w-12 h-6 rounded-full transition-colors"
            :class="contact.isStarred ? 'bg-wechat-green' : 'bg-gray-300'"
          >
            <div class="w-5 h-5 bg-white rounded-full transition-transform"
                 :class="contact.isStarred ? 'translate-x-6' : 'translate-x-0.5'"></div>
          </button>
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="bg-white p-4">
      <button class="w-full bg-wechat-green text-white py-3 rounded-lg font-medium">
        发消息
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useContactStore } from '@/stores'

const route = useRoute()
const router = useRouter()
const contactStore = useContactStore()

const contact = computed(() => 
  contactStore.contacts.find(c => c.id === route.params.id) || contactStore.contacts[0]
)

const goBack = () => {
  router.back()
}

const toggleStar = () => {
  contactStore.toggleStar(contact.value.id)
}
</script>
